<template>
  <div
    class="myBtn"
    :class="{
      lineBlue: bgColor == 'line-blue',
      lineGray: bgColor == 'line-gray',
      darkBlue: bgColor == 'dark-blue',
      lightBlue: bgColor == 'light-blue',
      darkGray: bgColor == 'dark-gray',
      lineWhite: bgColor == 'line-white',
      readOnly: readOnly,
    }"
    :style="{
      width: width + 'px',
      height: height + 'px',
      fontSize: size + 'px',
      lineHeight: height + 'px',
    }"
    @click="handleClick"
  >
    {{ label }}
  </div>
</template>

<script>
export default {
  props: {
    // 标题文字
    label: {
      type: String,
      default: "",
      required: true,
    },
    // 按钮颜色 line-blue line-gray dark-blue light-blue dark-gray line-white
    bgColor: {
      type: String,
      default: "line-blue",
    },
    // 只读
    readOnly: {
      type: Boolean,
      default: false,
    },
    // 宽度
    width: {
      type: [Number, String],
      default: 103,
    },
    // 高度
    height: {
      type: [Number, String],
      default: 28,
    },
    // 字体大小
    size: {
      type: [Number, String],
      default: 16,
    },
  },
  data() {
    return {};
  },
  methods: {
    // 点击事件
    handleClick() {
      if (this.readOnly) return;
      this.$emit("click");
    },
  },
};
</script>

<style lang="scss" scoped>
.myBtn {
  user-select: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-align: center;
  z-index: 9;
}
.lineBlue {
  background-image: url("../../assets/line-blue.png");
  color: #193980 !important;
  &:hover {
    background-color: #7796d9;
    cursor: pointer;
    color: #fff;
  }
  &:active {
    background-color: #6e89c4;
  }
}
.lineGray {
  background-image: url("../../assets/line-gray.png");
  color: #909090 !important;
  &:hover {
    background-color: #e7e7e7;
    cursor: pointer;
  }
  &:active {
    background-color: #e0e0e0;
  }
}
.lineWhite {
  background-image: url("../../assets/line-white.png");
  color: #fff !important;
  &:hover {
    background-color: rgba(255, 255, 255, 0.1);
    cursor: pointer;
  }
  &:active {
    background-color: rgba(255, 255, 255, 0.2);
  }
}
.darkBlue {
  background-image: url("../../assets/dark-blue.png");
  color: #fff !important;
  &:hover {
    opacity: 0.9;
    cursor: pointer;
  }
}
.lightBlue {
  background-image: url("../../assets/light-blue.png");
  color: #fff !important;
  &:hover {
    opacity: 0.9;
    cursor: pointer;
  }
}
.darkGray {
  background-image: url("../../assets/dark-gray.png");
  color: #fff !important;
  &:hover {
    opacity: 0.9;
    cursor: pointer;
  }
}
.readOnly {
  pointer-events: none;
}
</style>
